// 导入监控元素是否进入可视区域函数
import { useIntersectionObserver } from '@vueuse/core'
// 导入加载失败显示的默认的图片
import defImg from '@/assets/images/200.png'
// 导入图片加载时显示的动画图片
import loadImg from '@/assets/images/load.gif'
export default {
  install (app) {
    // vue3 挂载全局属性（所有组件都可以获取load）| vue2 => Vue.prototype.name = 'axios'
    app.config.globalProperties.load = loadImg
    app.directive('ilazy', {
      mounted (el, bind) {
        // console.log(el) // el就是指令绑定的元素
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }]) => {
            // targetIsVisible.value = isIntersecting
            // isIntersecting 是否进入可视区域  true 进入 | false 离开
            //   console.log(isIntersecting)
            if (isIntersecting) {
              // 延时器,延迟获取后端返回的图片地址
              setTimeout(() => {
                // 调用获取数据的api
                el.src = bind.value
              }, 1000)

              // 图片加载失败显示的默认图片
              el.onerror = () => {
                el.src = defImg
              }
              // 关闭监控
              stop()
            }
          }
        )
      }
    })
  }
}
